<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>登陆</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="${request.contextPath}/favicon.ico">
    <link href="${request.contextPath}/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${request.contextPath}/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="${request.contextPath}/css/animate.css" rel="stylesheet">
    <link href="${request.contextPath}/css/style.css?v=4.1.0" rel="stylesheet">
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html"/>
    <![endif]-->
    <script>
        if (window.top !== window.self) {
            window.top.location = window.location;
        }
    </script>
    <style>
        .form-control:focus,
        .single-line:focus {
            border-color: #0e9aef !important;
        }

        .middle-box {
            padding-top: 60px;
            margin: 8% auto;
        }

        .loginscreen.middle-box {
            width: 360px;
        }

        .box {
            background: #fff;
            padding: 20px;
        }
    </style>
</head>
<body class="gray-bg">

<div class="middle-box text-center loginscreen  animated fadeInDown">
    <div class="box">
        <div>

            <!--<h3 class="logo-name">OSS</h3>-->

        </div>
        <h3>Spring-boot集成shiro</h3>

        <form class="m-t" role="form">
            <div class="form-group">
                <input type="text" id="username" class="form-control" name="username" value="" placeholder="用户名">
            </div>
            <div class="form-group">
                <input type="password" id="password" class="form-control" name="password" value="" placeholder="密码">
            </div>
            <#if msg??>
                <div class="form-group">
                    <span style="color: #cc6571;">${msg}</span>
                </div>
            </#if>
            <button type="button" class="btn btn-success block full-width m-b" onclick="login();">登 录</button>


            <p class="text-muted text-center"><a href="login.html">
                <small>忘记密码了？</small>
            </a> | <a href="/admin/register.html">注册一个新账号</a>
            </p>

        </form>
    </div>
</div>

<!-- 全局js -->
<script src="${request.contextPath}/js/jquery.min.js?v=2.1.4"></script>
<script src="${request.contextPath}/js/bootstrap.min.js?v=3.3.6"></script>
<script src="${request.contextPath}/js/plugins/layer/layer.min.js?v=20171121"></script>
<script>
    function login() {
        var username = $('#username').val();
        var pwd = $('#password').val();
        if (isEmpty(username)) {
            layer.msg('请输入用户名');
            return;
        }
        if (isEmpty(pwd)) {
            layer.msg('密码不能为空');
            return;
        }
        var is_loading;
        $.ajax({
            url: '/sys/login',
            data: {'username': username, 'password': pwd},
            type: 'POST',
            dataType: 'json',
            beforeSend: function () {
                is_loading = layer.load(0, {
                    shade: [0.1, '#fff']
                });
            },
            success: function (result) {
                console.info(JSON.stringify(result));
                if (result.success) {
                    window.location.href = result.obj;
                } else {
                    layer.msg(result.msg);
                }
            },
            complete: function () {
                layer.close(is_loading);
            },
            error: function (err) {
                layer.msg('网络错误，请稍后重试！');
            }
        });
    }

    function isEmpty(obj) {
        return obj === null || obj === '';
    }
</script>
</body>
</html>